@import 'var.scss';
@import 'global.scss';



  .home-container{
        // border:1px solid  red;
        box-sizing: border-box;
        width:100%;
        min-width: 800px;
        max-width: 1200px;
        margin: 0 auto;
        height: 100%;
        margin-top:$header-height+20px;
    }

    //banner相关

    .banner{
        // border:$border
    }
    .el-carousel__item h3 {
        color: #475669;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
        text-align: center;
      }
      
      .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
      }
      
      .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
      }

    //最新歌曲相关
    .new-song-list-wrap{

        margin-top: $page-item-margin;
        height: 400px;
        // border:$border;

        span{
            font-weight: $home-tag-font-weight;
        }
    }
    .new-song-list{

        height: 350px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        flex-wrap: wrap;
        margin-top:10px;
        // border:1px solid black;
        .new-song-wrap{
            width:22%;
            height: 75px;
            // border:1px solid blue;
            display: flex;
            box-sizing: border-box;
            position: relative;
            cursor: pointer;
     
            .avater{
                width:75px;
                height: 75px;
                position: absolute;
                box-sizing: border-box;
               
                border-radius:10px;
                overflow: hidden;
                .el-image{
                    width:100%;
                    height:100%;
                    
                }
            }
          
            .song-info{
                margin-left: 75px;
                width: 75%;     
                height: 100%;
                box-sizing: border-box;
                overflow: hidden;
                padding:5px;
                // border:1px solid black;
                p{
               
                    display: flex;
                    align-items:center;
                    box-sizing: border-box;
                    width:100%;
                    margin:0;
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                   
                }
                .song-info-subtitle{
                    color: rgb(146,146,190);
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                }
                .song-info-author{
                    font-size: 15px;
                    color: rgb(146,146,190);
                }
            }
        }
        .new-song-wrap:hover{
            background-color: rgb(234,234,234);
            .avater{
                background-color: #000;
                
                .el-image{
                    opacity: 0.3;
                }
                
            }

            .avater::after{
                content:'' ;
                background:url('../../static/icon/song-play.png');
                background-size: cover;
                width:30px;
                height: 30px;
                display:inline-block;
                position: absolute;
                left: 50%;
                top: 50%;
                z-index: 9999;
                transform:translate(-50%, -50%);
                opacity: 1.0;
            }
        }
      
    }

    //推荐歌单相关
    .new-song-list-menu-wrap{
        margin-top: $page-item-margin;
        height: 600px;
        // border:$border;

        .new-song-menu-tag{
            font-weight: $home-tag-font-weight;
        }
    }
    .new-song-menu-list{
        height: 550px;
        display:flex;
        justify-content:space-between;
        align-items:center;
        // align-items:space-between;
        flex-wrap: wrap;
        margin-top:10px;
        // border:$border;
        .new-song-menu-wrap{
            flex: 0 0 17.5%;
            max-width: 17.5%;
            height: 0;
            padding-bottom: 22.5%;
            cursor: pointer;
            // border:$border;
            .avater{
                width:100%;
                height: 0;
                padding-bottom: 100%;
                position: relative;
                .new-song-menu-counts{
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 35px;
                    border-bottom-left-radius: 5px;
                    border-bottom-right-radius: 5px;
                    text-align: right;
                    color:rgb(243, 238, 238);
                    // background-color: transparent;
                    background-image:transparent;
                    transition:background-image 1.5s;
                    // border:1px solid red;
                }
                
            }
            .avater:hover{
               
                .new-song-menu-counts{
                    // background-color: rgba(116, 113, 113,0.4);
                    background-image: linear-gradient(rgb(78, 72, 72),rgba(116, 113, 113,0.2))
                }
            }
            .song-menu-info{
                width: 100%;
                padding:2px;
                box-sizing: border-box;
                overflow:hidden;
                text-overflow:ellipsis;
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;

                span{
                    color:rgb(116, 113, 113);
                }
                span:hover{
                    color: rgb(46, 43, 43);
                }
            }

        }
        
    }

    //推荐MV相关
    .recommend-MV-list-wrap{
        margin-top: $page-item-margin;
        height: 500px;
        width:100%;
        // border: $border;
        box-sizing: border-box;
        .recommend-MV-tag{
            font-weight: $home-tag-font-weight;
        }
        .recommend-MV-list{
            height: 450px;
            width: 100%;
            // border:$border;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            box-sizing: border-box;
            .new-MV-wrap{
                flex: 0 0 27%;
                box-sizing: border-box;
                height: 0;
                padding-bottom: 20%;
                // border:$border;
                overflow: hidden;
                .avater{
                    
                    width: 100%;
                    height: 0;
                    padding-bottom:(5/9)*100%;
                    // border: 1px solid black;
                    overflow: hidden;
  
                }
                .mv-info{
                    width: 100%;
                    padding:2px;
                    margin:0;
                    box-sizing: border-box;
                   
                    // border: $border;
                    p{
                        overflow:hidden;
                        text-overflow:ellipsis;
                        color:rgb(116, 113, 113);
                        // border:$border;
                        margin:0;
                    }
                    p:hover{
                        color: rgb(46, 43, 43);
                    }
                    p:last-child{
                        font-size: 12px;
                    }
                }
            }

        }
        
    }

 